---
title: Next.js
description: Pravila linterja, specifična za Next.js, za Ultracite.
---

Konfiguracija za Next.js vsebuje pravila linterja, specifična za Next.js, za optimizacijo slik, strukturo dokumenta in vzorce App Routerja.

## Namestitev

Dodajte konfiguracijo za Next.js v vaše `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Pregled

Ta konfiguracija doda pravila, specifična za razvoj z Next.js:

- **Optimizacija slik**: Zahtevaj uporabo Next.js `<Image>` komponente
- **Struktura dokumenta**: Prepreči nepravilno uporabo posebnih komponent Next.js
- **Komponente na strani odjemalca**: Poskrbi, da se asinhrone komponente na odjemalcu pravilno obravnavajo
- **Konfiguracijske datoteke**: Posebno obravnavanje datotek `next.config.*`

## Pravila specifična za Next.js

### Eksperimentalno

| Pravilo | Nastavitev | Opis |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Prepreči asinhrone komponente na odjemalcu v Next.js. Komponente na odjemalcu bi morale biti sinhrone; za asinhrone operacije uporabite komponente na strežniku. |

### Zmogljivost

| Pravilo | Nastavitev | Opis |
|------|---------|-------------|
| `noImgElement` | `error` | Prepove uporabo HTML elementa `<img>`. Namesto tega uporabite Next.js `<Image>` komponento za samodejno optimizacijo slik. |

### Slog

| Pravilo | Nastavitev | Opis |
|------|---------|-------------|
| `noHeadElement` | `error` | Prepove uporabo HTML elementa `<head>`. Namesto tega uporabite Next.js `next/head` ali API za metapodatke App Routerja. |

### Sumljivo

| Pravilo | Nastavitev | Opis |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Prepreči uvažanje `next/document` v datoteke strani. `_document.tsx` bi moral obstajati le v `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Prepreči uvažanje `next/head` v `_document.tsx`. Namesto tega uporabite `<Head>` iz `next/document`. |

## Nadomestitve konfiguracijskih datotek

Prednastavitev za Next.js vključuje posebno obravnavo konfiguracijskih datotek in komponent App Routerja:

### Konfiguracijske datoteke Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

To omogoča vzorce konfiguracij Next.js, ki običajno morda ne bi prestali pravil linterja.

### App Router strani in postavitve

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Komponentam strani in postavitvam App Routerja je dovoljeno, da so asinhrone brez zahteve po `await`, saj Next.js zanje zagotavlja posebno obravnavo pri upodabljanju na strežniku in pridobivanju podatkov.